<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- necessary -->
    <meta name="keywords" content="1,2,3">
    <meta name="description" content="">
    <!-- description -->
    <meta name="renderer" content="webkit">
    <title>联系人列表</title>
    <!-- base -->
    <link href="../../css/comm/swiper.min.css" rel="stylesheet">
    <link href="../../css/comm/base-m.css" rel="stylesheet">
    <link href="../../css/user/user.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 校验部分css -->
    <style>
    label.error {
        margin: 5px 5px;
        color: #c00;
    }
    </style>
</head>

<body class="overflow-h">
    <form class="link-man-validate" action="">
        <div class="clear full-w pl-25 pr-25 mt-20">
            <p class="f-18 col-7a7a7a f-w line-h-30 h-30 mt-5 mb-5">
                姓名
            </p>
            <input class="mb-10 full-w h-35 line-h-35 f-14 pl-5 pr-5 radius-5 bor bor-col-7C7C7C focus-input-pri" type="text" placeholder="张先生" name="link_name">
            <p class="f-18 col-7a7a7a f-w line-h-30 h-30 mt-5 mb-5">
                手机号码
            </p>
            <div class="clear full-w pos-r mb-5 mt-5 pos-r">
                <div class="full-w h-35 line-h-35 f-14 pl-10 pr-10 radius-5 bor bor-col-7C7C7C linkman-sel">
                    <span class="linkmansel-span">中国（+86）</span>
                    <input class="linkmansel-val" type="hidden" value="0086">
                </div>
                <div class="clear full-w bg-white pos-a t-35 l-0 z-99 bor bor-col-7C7C7C bor-t-none radius-5 dis-n linkman-sellayout input-pri">
                    <div class="swiper-container h-140">
                        <div class="swiper-wrapper swiper-wrapper-ul">
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li bg-linkmanli-act pl-10 pr-10 h-35 line-h-35">中国（+86）</div>
                                <input class="linkmansel-lival" type="hidden" value="0086">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">香港（+852）</div>
                                <input class="linkmansel-lival" type="hidden" value="0852">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">美国（+1）</div>
                                <input class="linkmansel-lival" type="hidden" value="0001">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="0044">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国1（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00442">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国2（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00443">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国3（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00444">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国4（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00445">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国5（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00446">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国6（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国7（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国8（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00448">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国9（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00449">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国10（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="004410">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国11（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国12（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国13（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国14（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                            <div class="swiper-slide swiper-wrapper-li">
                                <div class="linkmansel-li pl-10 pr-10 line-h-35">英国15（+44）</div>
                                <input class="linkmansel-lival" type="hidden" value="00447">
                            </div>
                        </div>
                    </div>
                </div>
                <img class=" img-25 linkman-selimg pos-a t-5 r-12 z-9" src="../../img/user/sel-arrow.png" alt="">
            </div>
            <input class="form-control mb-10 mt-10 full-w h-35 line-h-35 f-14 pl-5 pr-5 radius-5 bor bor-col-7C7C7C focus-input-pri" type="text" placeholder="13800138000" name="link_phone">
            <p class="f-18 col-7a7a7a f-w line-h-30 h-30 mt-5 mb-5">
                通知方式
            </p>
            <div class="clear full-w mt-10 mb-20">
                <div class="col-xs-6 pl-0 pr-0">
                    <p class="f-14 col-7a7a7a f-w line-h-30 h-30 way-pho-p">
                        电话方式接收 <img class="img-30 ml-10 sel-ph-img" src="../../img/user/sele-right.png" alt="">
                        <input type="radio" class="dis-n sel-radio sel-phone" checked="checked" name="wayfor" value="phoneway">
                    </p>
                </div>
                <div class="col-xs-6 pl-0 pr-0">
                    <p class="f-14 col-7a7a7a f-w line-h-30 h-30 way-mai-p">
                        短信方式接收 <img class="img-30 ml-10 sel-em-img" src="../../img/user/sele-none.png" alt="">
                        <input type="radio" class="dis-n sel-radio sel-email" name="wayfor" value="mailway">
                    </p>
                </div>
            </div>
            <div class="clear full-w mt-40">
                <button type="submit" class="full-w h-35 line-h-35 f-14 pl-5 pr-5 radius-5 bor-none full-w bg-E5934C col-white f-16 active-col-white">保存联系人</button>
            </div>
        </div>
    </form>
    <script src="../../js/comm/jquery.min.js"></script>
    <script src="../../js/comm/swiper.jquery.min.js"></script>
    <script src="../../js/comm/jquery.validate.min.js"></script>
    <script src="../../js/comm/jquery.validate.messages_zh.js"></script>
    <script src="../../js/user/linkmanvalidate.js"></script>
    <script src="../../js/user/user.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',
            slidesPerView : 4,
            height: 140,
            preventLinksPropagation : false,
            preventClicks : false,
            mousewheelControl : true,
        })        
    </script>
</body>

</html>